<template>
  <div class="m-message">
    <div class="message-container">
      <div class="avatar">
        <Badge :value="message.badge" :type="message.badge > 99 ? 'ellipsis' : 'value'">
          <div class="avatar-content" :style="{ backgroundImage: `url(${message.avatar})` }"></div>
        </Badge>
      </div>
      <div class="divider"></div>
      <div class="description">
        <div class="username">{{ message.username }}</div>
        <div class="message">{{ message.message }}</div>
      </div>
      <div class="divider"></div>
      <div class="time">{{ message.time }}</div>
    </div>
  </div>
</template>

<script>
import Badge from '../Badge';


export default {
  components: {
    Badge
  },
  props: {
    message: {
      type: Object
    }
  }
}
</script>

<style lang="scss">
  .m-message {
    padding: 0 1.5rem;
    cursor: pointer;
    .message-container {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid rgb(242, 242, 242);
      .avatar {
        flex: 0 0 auto;
        .avatar-content {
          width: 40px;
          height: 40px;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          border-radius: 50%;
        }
      }
      .description {
        flex: 1 1 auto;
        .username {
          font-size: 1.4rem;
          font-weight: bold;
          color: rgb(51, 51, 51);
        }
        .message {
          font-size: 1.2rem;
          line-height: 2.4rem;
          color: rgb(153, 153, 153);
        }
      }
      .time {
        flex: 0 0 auto;
        padding-top: 6px;
        color: rgb(153, 153, 153);
      }
      .divider {
        width: 1rem;
        flex: 0 0 auto;
      }
    }
  }
</style>